<template>
    <div>
        <el-row>
            <div class="block">
                <el-image :src="img">
                    <div slot="placeholder" class="image-slot">
                        加载中<span class="dot">...</span>
                    </div>
                </el-image>
            </div>
        </el-row>
        <el-row :gutter="20">
            <el-col :span="12">
                <a :href="'tel:15286800731'">
                    <div class="call twinkle" ><el-button type="danger" icon="el-icon-phone-outline">拨打电话</el-button></div>
                </a>
            </el-col>
            <el-col :span="12">
                <a :href="'sms:15286800731'">
                    <div class="call twinkle"><el-button type="danger" icon="el-icon-s-comment">发送消息</el-button></div>
                </a>

            </el-col>
        </el-row>
    </div>
</template>

<script>
    export default {
        name: "Header",
        data() {
            return {
                img: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg',
            }
        }
    }
</script>

<style scoped>
    .el-row {
        margin-bottom: 10px;
    }
    .el-col {
        border-radius: 4px;
    }
    .call {
        text-align: center;
        background-color: #f56c6c;
        border-radius: .3rem;
    }
    .twinkle {
        -webkit-animation: zoom 5s infinite ease-in-out; /* Safari 和 Chrome */
        animation: zoom 5s infinite ease-in-out;
    }
    @keyframes zoom {
        0% {
            transform: scale(1.0);
            -ms-transform: scale(1.0); /* IE 9 */
            -moz-transform: scale(1.0); /* Firefox */
            -webkit-transform: scale(1.0); /* Safari 和 Chrome */
            -o-transform: scale(1.0); /* Opera */
        }
        100% {
            transform: scale(0.9);
            -webkit-transform: scale(0.9);
            opacity: 0.5;
        }
    }
</style>